<template>
<div class="result">
  <div class="title">
    <h1>{{$route.query.q}}</h1>
    <span>共找到{{count}}个结果</span>
  </div>
  <el-tabs v-model="activeIndex" @tab-click="handleClick">
    <el-tab-pane label="歌曲" name="songs">
      <div>
        <table class="el-table">
          <thead>
          <tr>
            <th></th>
            <th></th>
            <th></th>
            <th>音乐标题</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>时长</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in songlist" :key="index" >
            <td>{{index+1}}</td>
            <td></td>
            <td>
              <div class="img-warp" >
                <span><img src="../assets/images/play.png" alt="" class="play" @click="aaaa(item.id)"></span>
                <!--                        <img :src="item.album.alias.img1v1Url" alt="" class="img-warp-img" @click="aaaa(item.id)">-->
              </div>
            </td>
            <td>
              <div class="song-wrap">
                <div class="name-wrap">
                  <span>{{item.name}}</span>
                  <span class="img-mv" v-if="item.mvid!=0">
                <img src="../assets/images/mv.png" alt="" @click="playmv(item.id)">
              </span>
                </div>
              </div>
            </td>
            <td> {{item.artists[0].name}}</td>
            <td>{{item.album.name}}</td>
            <td>{{item.duration}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </el-tab-pane>
    <el-tab-pane label="歌单" name="lists">
      <div class="tab-content">
        <div class="items">
          <div class="item" v-for="(item,index) in playlists" :key="index" @click="toPlaylist(item.id)">
            <div class="img-wrap">
              <div class="desc-wrap">
                <span class="desc">播放量：{{item.playCount}}</span>
              </div>
              <img :src="item.coverImgUrl" alt="">
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="MV" name="mv">
       <div class="items">
        <div class="item" v-for="(item,index) in mv" :key="index" @click="playmv">
          <div class="img-wrap">
            <img :src="item.cover" alt="">
            <div class="num-wrap">
              <div></div>
              <div class="num">{{item.playCount}}</div>
            </div>
          </div>
          <div class="info-wrap">
            <div class="name">{{item.name}}</div>
            <div class="singer">{{item.artistName}}
            </div>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</div>
</template>

<script>
import axios from "axios";
export default {
  name: "result",
  data(){
    return{
      //tab切换时 会改变的数据
      activeIndex:'songs',
      songlist:[],
      //歌单的数据
      playlists:[],
      //mv的数据
      mv:[],
      //搜索的总数
      count:0,
      keywords:''
    }
  },
  created() {
    this.keywords = this.$route.query.q
    axios({
      url:'https://autumnfish.cn/search',
      method:'get',
      params:{
        keywords:this.$route.query.q,
        type:1
      }
    }).then(res=>{
      // console.log(res)
      this.songlist = res.data.result.songs
      // 计算歌曲时间
      for(let i = 0;i<this.songlist.length;i++){
        let min = parseInt(this.songlist[i].duration / 1000 /60)
        min = min < 10? '0'+min : min
        let sec =parseInt((this.songlist[i].duration / 1000) % 60)
        sec = sec < 10? '0'+sec : sec
        // console.log(min +'|'+ sec)
        this.songlist[i].duration  = `${min}:${sec}`
      }
      //保存总数
      this.count = res.data.result.songCount
    })
  },
  watch:{
    activeIndex(){
      //songs 歌曲
      //lists 歌单
      //mv mv
      let type = 1;
      let limit = 10
      switch (this.activeIndex){
        case 'songs':
          type=1;
          limit = 10
          break;
        case 'lists':
          type=1000;
          limit = 8
          break;
        case 'mv':
          type=1004;
          limit=8
          break;

          default:
          break;
      }

      axios({
        url:'https://autumnfish.cn/search',
        method:'get',
        params:{
          keywords:this.$route.query.q,
          type,
          limit
        }
      }).then(res=>{
        console.log(res)
        if(type ==1){
          this.songlist = res.data.result.songs
          // 计算歌曲时间
          for(let i = 0;i<this.songlist.length;i++){
            let min = parseInt(this.songlist[i].duration / 1000 /60)
            min = min < 10? '0'+min : min
            let sec =parseInt((this.songlist[i].duration / 1000) % 60)
            sec = sec < 10? '0'+sec : sec
            // console.log(min +'|'+ sec)
            this.songlist[i].duration  = `${min}:${sec}`
          }
          //保存总数
          this.count = res.data.result.songCount
        }else if(type ==1000){
          // 歌单的逻辑
          this.playlists = res.data.result.playlists
          //歌单的总数
          this.count = res.data.result.playlistCount
          //处理 播放次数
          for(let i=0;i<this.playlists.length;i++){
            if(this.playlists[i].playCount>100000){
              this.playlists[i].playCount = parseInt(this.playlists[i].playCount/10000) + '万'
            }
          }
        }else{
          this.count = res.data.result.mvCount
          this.mv = res.data.result.mvs;
          //播放次数
          for(let i=0;i<this.mv.length;i++){
            if(this.mv[i].playCount>10000){
              this.mv[i].playCount = parseInt(this.mv[i].playCount/10000) + '万'
            }
          }
        }

      })
    }
  },
  methods:{
    //去mv页面
    playmv(){
        alert('暂不支持播放mv哦~')
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    aaaa(id){
      // console.log(id)
      axios({
        url:'https://autumnfish.cn/song/url',
        params:{
          id
        }
      }).then(res=>{
        let url = res.data.data[0].url
        this.$parent.musicUrl = url


      })
    },
    toPlaylist(id){
      this.$router.push(`/playlist?id=${id}`)
    }
  }
}
</script>


<style scoped>
  .result{
    position: relative;
    width: 100%;
  }
  .title{
    padding: 20px 0;
    display: flex;
    height: 50px;
    line-height: 50px;
  }
  .title h1{
    margin-right: 20px;
  }
  .title span{
    color: #a1a1a1;
    font-size: 14px;
    line-height: 70px;
  }
  /*歌曲内容*/
  table{
    padding-bottom: 50px;
    /*background-color: #ffa22d;*/
  }

  .el-table  tr{
    width: 100%;
  }
  th{
    height: 40px;
    line-height: 40px;
    color: #000000;
  }
  td{
    height: 60px;
    line-height: 60px;
  }


  .img-warp{
    width: 60px;
    height: 60px;
    /*margin-top: 20px;*/
    position: relative;
    margin: auto;
  }

  .img-warp .img-warp-img{
    width: 60px;
    height: 60px;
    cursor: pointer;
    border-radius: 5px;
  }

  .play{
    cursor: pointer;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

  .active{
    color: #ffa22d;
  }

  .img-mv{
    width: 60px;
    height: 60px;
    position: relative;
  }
  .img-mv img{
    width: 15px;
    height: 15px;
    position: absolute;
    cursor: pointer;
    top: 50%;
    left: 10px;
    transform: translate(-50%,-50%);
  }

  /*歌单内容*/
  .tab-content{
    margin: auto;
  }
  .tab-container .tab-bar{
    float: right;
    height: 20px;
    cursor: pointer;
  }
  .tab-container .tab-bar .item{
    padding: 0 10px;
    overflow: hidden;
  }
  /*.active {*/
  /*  color: #ffa22d;*/
  /*}*/

  .tab-content{
    width: 1100px;
    margin-top: 20px;

  }
  .tab-content .items {
    /*position: relative;*/
    width: 1100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .tab-content .item{
    width: 200px;
    margin-bottom: 30px;
  }
  .tab-content .img-wrap{
    width: 200px;
    height: 200px;

  }
  .tab-content .img-wrap img{
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
  }
  .tab-content .desc-wrap span{
    position: absolute;
    display: block;
    width: 200px;
    height: 30px;
    color: #ffffff;
  }
  .tab-content .item .name{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .tab-content .img-wrap .desc-wrap .play img{
    height: 40px;
    width: 40px;
    position: absolute;
    right: 3px;
    top: 156px;
    cursor: pointer;
  }

  /*mv*/

   .items{
     margin-top: 50px;
     /*background-color: #ff5777;*/
    width: 100%;
    display: flex;
     justify-content: space-evenly;
    flex-wrap: wrap;

  }
   .items .item{
    /*background-color: #ffa22d;*/
    width: 25%;
    height: 100%;
     position: relative;
     margin-top: 30px;
  }
  .items .item .img-wrap{
    width: 250px;
    height: 150px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
  }
   .items .item .img-wrap img {
    width: 250px;
    height: 150px;
  }
   .items .item .img-wrap span img{
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
   .items .item .img-wrap .num{
    position: absolute;
    right: 5px;
    top: 2px;
    color: #ffffff;
  }
   .items .item .info-wrap .name{
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

   .items .item .info-wrap .singer{
    color: #c6c6c6;
    font-size: 13px;
  }

</style>